<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Regular.js • Pager</title>
    <link rel="stylesheet" href="pager.css">
    <script src="../../dist/regular.js"></script>
    <script src="pager.js"></script>
  </head>
  <body>

    <div id="app"> </div>

    <script>
    // //1. nest style
    var app = new Regular({
      template: 
        "{{total}}:{{current}}<button on-click={{total = total + 1}}>total+1</button>\
          <pager total={{Math.floor(total/20)}} current={{current}} on-nav='{{this.go}}'/>\
          <pager total={{Math.floor(total/20)}} current={{current}} />",
      data: {total: 292, current:10},
      go: function(page){
        console.log(page)
      } 
    } ).inject("#app");

    //2. initialize style
    // var pager = new Pager({data: {total: 100, current:11}}).inject('#app');


    </script>

  </body>
</html>
